<template>
  <div>
    <el-row>
      <el-col :span="24" v-for="(item, index) in list" :key="index">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="item.images" class="image">
          <div style="padding: 14px;">
            <div class="alert alert-info" role="alert">
              <span>{{ item.title }}</span>
            </div>
            <div class="alert alert-warning" role="alert">
              <span>{{ item.desc }}</span>
            </div>
            <div class="bottom clearfix">
              <div class="alert alert-primary" role="alert">
                <time class="time">{{ item.createdAt }}</time>
              </div>
              <div class="alert alert-dark" role="alert">
                <router-link :to="{ name: 'DetailPage', params: { id: item._id}}">
                  <el-button type="text" class="button">详情</el-button>
                </router-link>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Recommend",
  data() {
    return {
      isShow: false,
      list: [],
    }
  },
  created() {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 0, 0.7)'
    });
    axios({
      method: "GET",
      url: "https://gank.io/api/v2/data/category/All/type/All/page/1/count/10",
    }).then((res) => {
      // console.log(res);
      const { data } = res.data;
      this.list = data;
    }).finally(() => {
      loading.close()
    })
  }
}
</script>

<style scoped>
.image {
  height: 300px;
  object-fit: cover;
}
.button {
  font-size: 16px;
}
</style>